<template>
<div class="home">
      <!-- 轮播图 -->
      <div class="tu">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(item,index) in tu" :key="index">
            <img :src=" 'http://101.132.181.9:3000/'+ item.imgPath" alt="">
            </el-carousel-item>
          </el-carousel>
      </div>

      <!-- 主体部分 -->
      <div class="a1">
        <div class="a2">
          <div class="a3">
            <p>手机</p>
          </div>
          <div class="box1">
            <div class="box2">
              <img src="../assets/imgs/shouji.png" alt="">
            </div>
              <div class="right1">
                     <div class="right2" v-for="(item,index) in sj" :key="index" @click="tiao(item.product_id)">
                        <div class="right3">
                           <img :src="'http://101.132.181.9:3000/'+item.product_picture" alt="">  
                           <p>{{item.product_name}}</p>
                           <p style="color:gray">{{item.product_title}}</p>
                           <p style="color:red">{{item.product_selling_price}}</p>
                        </div>
                      </div>
                     <div class="gengduo">
                         <p>浏览更多>></p>
                     </div>
                     </div>
          </div>
        </div>
      </div>
      <!-- //电视 -->
        <div class="a1">
        <div class="a2">
          <div class="a3">
            <p>家电</p>
            <ul class="a4">
              <li>热门</li>
              <li>电视观影</li>
            </ul>
          </div>
          <div class="box1">
            <div class="box2">
              <img src="../assets/imgs/dianshi51.png" alt="">
            </div>
              <div class="right1">
                     <div class="right2" v-for="(item,index) in ds" :key="index" @click="tiao(item.product_id)">
                        <div class="right3">
                           <img :src="'http://101.132.181.9:3000/'+item.product_picture" alt="">  
                           <p>{{item.product_name}}</p>
                           <p style="color:gray">{{item.product_title}}</p>
                           <p style="color:red">{{item.product_selling_price}}</p>
                        </div>
                      </div>
                     <div class="gengduo">
                         <p>浏览更多>></p>
                     </div>
                     </div>
          </div>
        </div>
      </div>
     <!-- //配件 -->
        <div class="a1">
        <div class="a2">
          <div class="a3">
            <p>配件</p>
            <ul class="a4">
              <li>热门</li>
              <li>保护套</li>
              <li>充电器</li>
            </ul>
          </div>
          <div class="box1">
            <div class="box2">
              <img src="../assets/imgs/erji.png" alt="">
            </div>
              <div class="right1">
                     <div class="right2" v-for="(item,index) in pj" :key="index" @click="tiao(item.product_id)">
                        <div class="right3">
                           <img :src="'http://101.132.181.9:3000/'+item.product_picture" alt="">  
                           <p>{{item.product_name}}</p>
                           <p style="color:gray">{{item.product_title}}</p>
                           <p style="color:red">{{item.product_selling_price}}</p>
                        </div>
                      </div>
                     <div class="gengduo">
                         <p>浏览更多>></p>
                     </div>
                     </div>
          </div>
        </div>
      </div> 
</div>
</template>
<script>
import { carousel, shouji ,dianshi} from "@/api/api.js";
export default {
  name: "Home",
  props: [],
  data() {
    return {
      tu: [], //图轮播
      sj: [], //手机
      ds:[],//电视
      pj:[],//配件
      num: 0,
      // list: [
      //   { name: "首页"},
      //   { name: "全部商品"},
      //   { name: "关于我们" }
      // ]
    };
  },
  created() {
    //钩子函数实例创建之后
    this.xuanran();
  },
  methods: {
    //方法
  //   dian(e) {
  //     this.num = e;
  //  },
    tiao(id) {
      this.$router.push({
        name: "xiangq",
        params: {
          id: id
        }
      });
      console.log(id);
    },
    xuanran() {
      carousel().then(res => {
        // console.log(res);
        this.tu = res.data.carousel;
      });
      shouji({ categoryName: "手机" }).then(res => {
        // console.log(res);
        this.sj = res.data.Product;
      });
      shouji({categoryName: "电视机"}).then(res=>{
        // console.log(res.data.Product);
        this.ds=res.data.Product

      })
      shouji({categoryName: "保护套"}).then(res=>{
        // console.log(res);
        this.pj=res.data.Product
      })
    }
  },
  components: {
    //注册子组件
  },
  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
.tu {
  width: 1200px;
  max-width: 1200px;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.a1 {
  width: 100%;
  background-color: rgb(235, 232, 232);
  .a2 {
    width: 1200px;
    max-width: 1200px;
    margin: 0 auto;
    // margin-left: 100px;
  }
  .a3 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    .a4{
      display: flex;
      list-style: none;
      li{
        display: flex;
        margin-top: 10px;
        padding: 0 15px;
        height: 18px;
      }
      li:hover{
        // display: flex;
        color: orange;
        border-bottom: 1px solid orange;
        // margin-top: 20px;
      }
    }
  }
}
footer {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  background-color: rgb(71, 70, 70);
  .di {
    height: 150px;
    ul {
      display: flex;
      align-items: center;
      color: white;
      justify-content: space-around;
      font-size: 20px;
      li {
        span {
          display: inline-block;
          margin-top: 50px;
        }
      }
    }
  }
}
// .xia {
//   width: 100%;
//   height: 200px;
//   text-align: center;
//   p {
//     color: gray;
//     margin-top: 10px;
//     a {
//       color: gray;
//       text-decoration: none;
//     }
//   }
// }
.box1 {
        width: 100%;
        height: 550px;
        display: flex;
        .box2 {
          width: 234px;
          height: 600px;
        img {
            width: 100%;
            height: 549px;
          }
      }
 }
.right1 {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
    .gengduo {
    width: 237px;
    height: 265px;
    margin-top: 4px;
    background-color: #fff;
    p {
      display: inline-block;
      width: 237px;
      height: 265px;
      font-size: 20px;
      text-align: center;
      line-height: 265px;
      color: rgb(75, 74, 74);
      padding: 0 2px;
      cursor: pointer;
    }
  }
  .right2 {
    width: 230px;
    height: 265px;
    margin: 5px 5px;
    background: #fff;
  
    .right3 {
      width: 100%;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
      }
      p {
        text-align: center;
        padding: 10px 0;
      }
    }
  }
}

</style>